<template>
  <div class="box">
    <div class="f1">
      <ul v-show="status != 'lbzs'">
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组33.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>上传申请资料</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组35.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>海关数据授权</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组36.png" alt="" />
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
      <!-- 从列表进入进度条 -->
      <ul v-show="status == 'lbzs'">
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span style="margin-left: -10px">企业认证</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组33.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组35.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>上传申请资料</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组37.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>海关数据授权</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/005.png" alt="" />
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
    </div>
    <div class="f2">
      <div class="content">
        <div class="content1">
          <h1>
            请下载
            <span
              @click="download"
              style="
                color: #0a7be0;
                text-decoration: underline;
                cursor: pointer;
              "
              >贸采采客户端</span
            >
            ，完成进出口贸易信息采集
          </h1>
          <div @click="manual" style="cursor: pointer">
            <img src="@/assets/image/组91.png" alt="" />
            <h6>操作手册</h6>
          </div>
        </div>

        <div class="btn">
          <button
            class="next"
            @click="nextStep"
            :class="{ actives: submitMessage == '提交中' }"
          >
            {{ submitMessage }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch } from "@/utils";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      submitMessage: "提交",
      status: "", //判断是从列表进入还是从表格进
      isLock: false,
      applyid: "",
      zhapplyid: "",
    };
  },
  mounted() {
    this.status = this.$route.query.status;
    this.applyid = sessionStorage.getItem("applyid");
    localStorage.getItem("zhapplyid")
      ? (this.zhapplyid = localStorage.getItem("zhapplyid"))
      : "";
  },
  methods: {
    // 下载客户端
    download() {
      const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
      a.setAttribute("target", "_blank");
      a.href = "http://operate.thunlink.cn/ThunRPA/贸采采客户端.exe";
      a.click();
    },
    // 查看操作手册
    manual() {
      const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
      a.setAttribute("target", "_blank");
      a.href = " http://operate.thunlink.cn/ThunRPA/贸采采客户端操作手册.pdf";
      a.click();
    },
    nextStep() {
      if (this.submitMessage == "提交中") return;
      this.submitMessage = "提交中";
      let url = "/api/hubeibusienss/CKBLRZHXbutton";
      let params = {
        applyid: this.applyid,
        zhapplyid: this.zhapplyid,
      };
      myPostFetch(url, params).then((res) => {
        if (res.msg == "ok") {
          localStorage.removeItem("zhapplyid");
          sessionStorage.removeItem("applyid");
          this.status
            ? this.$router.push("/gsbhApply4?status=lbzs")
            : this.$router.push("/gsbhApply4");
          this.submitMessage = "提交";
        } else {
          ElMessage.error("提交失败");
          this.submitMessage = "提交";
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
  .f1 {
    margin-top: 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 40px;
        .icon {
          display: flex;
          align-items: center;
          .icon1 {
            width: 40px;
          }
          .icon2 {
            width: 180px;
            height: 3px;
            background-color: #dbdbdb;
            margin: 0 8px;
          }
          .zssq {
            width: 110px;
          }
        }
        span {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          margin-left: -19px;
          margin-top: 3px;
        }
      }
    }
  }
  .f2 {
    box-sizing: border-box;
    padding: 40px 35px;
    margin: 0 auto;
    .content {
      box-sizing: border-box;
      padding: 30px 0;
      margin: 0 auto;
      width: 1023px;
      height: 100%;
      .title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        h6 {
          width: 5px;
          height: 18px;
          background-color: #0a7be0;
          margin-right: 10px;
        }
      }
      .content1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 45px 0;
        h1 {
          font-size: 18px;
          font-family: Source Han Sans SC;
          font-weight: 600;
          color: #000000;
          margin-bottom: 40px;
        }
        h6 {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #333333;
          margin-top: 25px;
        }
        img {
          width: 55px;
          height: 66px;
        }
      }
      // 按钮
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        .last {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          opacity: 0.3;
          border-radius: 4px;
        }
        .next {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          border-radius: 4px;
          &.actives {
            background-color: rgba(10, 123, 224, 0.6);
          }
        }
        button {
          align-items: center;
          justify-content: center;
          display: flex;
          border-radius: 5px;
          width: 180px;
          height: 50px;
          color: #fff;
          border: 0;
        }
      }
    }
  }
}
</style>
